<template>
	<view class="container">
		<view class="cell flex-b">
			<view class="hd"><text style="color: red;">*</text>收货数量</view>
			<view class="bd flex-ac">
				<input style="flex: 1;" type="digit" v-model="form.num" placeholder="请输入"
					placeholder-style="color: #ACAFBF">
				<text style="color: #3F4151; margin-left: 20rpx;">吨</text>
			</view>
		</view>
		<u-picker mode="time" title="选择时间" v-model="show" :params="params" @confirm="chooseTime" confirm-color="#3db020"></u-picker>

		<view class="cell" style="border: none;">
			<view class="hd">签单图片（最多10张，请上传签收单图片）</view>
			<u-gap height="30"></u-gap>
			<view class="imageBox flex-wrap">
				<view class="imageItem" v-for="(item,index) in images" :key="index" @click="$Common.viewImage(images, index)">
					<image class="image" :src="item" mode=""></image>
					<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index)" mode="aspectFill"></image>
				</view>
				<view class="imageItem" @click="chooseImg" v-if="images.length < 10">
					<image class="image" src="../../../static/img/upload.png" mode=""></image>
					<view class="text">点击上传</view>
				</view>
			</view>
		</view>

		<view class="foot" style="position: fixed; left: 0; bottom: 0;">
			<view class="btnBox flex-ac">
				<view class="btn middle" @click="sureAddGoods">确认</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
	</view>
</template>

<script>
	import config from '../../../utils/config.js'
	// 引入高德地图sdk
	// import amap from '@/utils/amap-wx.130.js';
	export default {
		data() {
			return {
				id: '',
				city: '',
				area: '',
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				dw: '',
				form: {
					id:"",  // id【必须】
					imgUrls:"" ,  // 装货图片
					num:"",  // 装货数量【必须】
				},
				weight: '',
				time: '',
				images: [],
				imagesId: [],
				// key: '485fb6f1651a73068ab5bd94ad428885',
				amapPlugin: ''
			}
		},
		onLoad(opt) {
			if (opt){
				console.log('opt:', opt)
				this.form.id = opt.id
				this.id = opt.id
				this.dw = opt.dw
			}
			var timestamp = Date.parse(new Date()) / 1000;
			// this.form.predictArriveTime = this.$Common.formatTime(timestamp, "Y-M-D h:m:s")
			// this.id = opt.id
			// this.amapPlugin = new amap.AMapWX({
			// 	key: this.key
			// });
			// this.getDetail()
			// this.getLocation()
		},
		methods: {
			getLocation() {
				// #ifdef APP-PLUS || H5
				let _this = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true, //是否解析地址信息
					success: function(res) {
						console.log(res);
						_this.form.realSenderLatitude = res.latitude
						_this.form.realSenderLongitude = res.longitude
						let temp = res.address //地址信息（仅App端支持，需配置geocode为true）
						_this.city = temp.province + '/' + temp.city + '/' + temp.district
						_this.area = temp.district + temp.street + temp.streetNum + temp.poiName
						console.log("currentAdd:", _this.area)
					}
				});
				// #endif

				// #ifdef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('获取定位成功：', res)
						this.form.realSenderLatitude = res.latitude
						this.form.realSenderLongitude = res.longitude
						this.amapPlugin.getRegeo({
							location: `${res.longitude},${res.latitude}`,
							// location: `106.63336,30.455835`,
							success: (dw) => {
								console.log('解析位置成功：', dw)
								this.area = dw[0].name
								let temp = dw[0].regeocodeData.addressComponent
								this.city = temp.province + '/' + (temp.city&& temp.city.length > 0 ? temp.city : temp.province ) + '/' + temp.district
								console.log("city:", this.city, 'area:', this.area)
							},
							fail:(err) => {
								console.log('解析位置失败：', err)
							}
						})
					},
					fail: (res) => {
						console.log('获取定位失败:', res)
					}
				})
				// #endif
			},
			chooseTime(e) {
				console.log('time:', e)
				this.form.predictArriveTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			// 确认装货
			sureAddGoods() {
				// if(this.city =='' || this.area == '') return this.$Toast.message('未获取到当前位置信息')
				if (this.form.num === '') return this.$Toast.message('请输入装货数量')
				if (this.images.length > 0) {
					this.form.imgUrls = this.images.toString()
				}else{
					return this.$Toast.message('请上传签单图片')
				}
				console.log('form:', this.form)
				this.$Net.post('/orderTransport/arrive', this.form).then(res => {
					console.log('装货：', res)
					this.$Toast.messageIcon('操作成功')
					setTimeout(() => {
						this.$Jump.Back(1)
					}, 1500)
				})
			},
			// 获取订单信息  /driverApi/transportOrder/detail
			getDetail() {
				
			},
			// 删除图片
			delImage(index) {
				this.images.splice(index, 1)
			},
			//  选择图片
			chooseImg: function() {
				var that = this
				uni.chooseImage({
					count: 10 - this.images.length, // 默认9
					// sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let tempFilePaths = res.tempFilePaths;
						console.log('tempFilePaths:', tempFilePaths)
						tempFilePaths.map(el => {
							that.uploadImg(el)
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
			// 上传图片
			uploadImg(imageUrl) {
				return new Promise((resolve, reject) => {
					var that = this
					uni.uploadFile({ //上传
						url: config.BASE_URL + '/imgs/uploadImage',
						filePath: imageUrl,
						name: "picture",
						header: {
							'authorization': 'Bearer ' + uni.getStorageSync('token')
						},
						formData: {},
						success(res) {
							let data = JSON.parse(res.data)
							console.log('图片上传:', data)
							that.images.push(data.data)
							// that.imagesId.push(data.data.fileId)
							// console.log('images:', that.images)
							// console.log('imagesId:', that.imagesId)
						},
						fail(res) {
							reject(res);
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	@import './unloadGoods.scss';
</style>